<template>
	<view class="content">
		<view class="message-list">
			<view class="message-item" v-for="(item, index) in messageList" :key="index">
				<view class="message-header">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="info">
						<text class="name">{{item.name}}</text>
						<text class="time">{{item.time}}</text>
					</view>
				</view>
				<view class="message-content">
					<text>{{item.content}}</text>
				</view>
			</view>
		</view>
		<!-- 发布弹窗 -->
		<view v-if="showPublishPopup" class="custom-popup-mask" @click="closePublishPopup">
			<view class="custom-popup" @click.stop>
				<view class="popup-item" @click="onChooseAlbum">从相册选择</view>
				<view class="popup-item" @click="onTakePhoto">
					相机
					<text class="popup-desc">拍摄与直播</text>
				</view>
				<view class="popup-item" @click="onTextGenerate">写文字</view>
				<view class="popup-cancel" @click="closePublishPopup">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [
					{
						avatar: '/static/images/avatar.png',
						name: '系统通知',
						time: '2024-03-17 14:30',
						content: '欢迎使用任务发布平台'
					}
				],
				showPublishPopup: false
			}
		},
		onLoad() {
			this.loadMessages()
		},
		onShow() {
			this.showPublishPopup = false;
		},
		mounted() {
			uni.onTabBarMidButtonTap(() => {
				const pages = getCurrentPages();
				if (pages.length > 0) {
					const currentPage = pages[pages.length - 1];
					if (currentPage.route === 'pages/tabbar/message/message') {
						this.showPublishPopup = true;
					}
				}
			});
		},
		methods: {
			loadMessages() {
				// 这里可以添加加载消息的逻辑
				console.log('加载消息列表')
			},
			closePublishPopup() {
				this.showPublishPopup = false;
			},
			onChooseAlbum() {
				this.closePublishPopup();
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						uni.navigateTo({
							url: '/pages/tabbar/publish/publish?image=' + encodeURIComponent(tempFilePath)
						});
					}
				});
			},
			onTakePhoto() {
				this.closePublishPopup();
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						uni.navigateTo({
							url: '/pages/tabbar/publish/publish?image=' + encodeURIComponent(tempFilePath)
						});
					}
				});
			},
			onTextGenerate() {
				this.closePublishPopup();
				uni.navigateTo({
					url: '/pages/text-input/text-input'
				});
			}
		}
	}
</script>

<style>
	.content {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.message-list {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.message-item {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.message-item:last-child {
		border-bottom: none;
	}

	.message-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.info {
		flex: 1;
	}

	.name {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.time {
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
	}

	.message-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 发布弹窗样式 */
	.custom-popup-mask {
		position: fixed;
		left: 0; right: 0; top: 0; bottom: 0;
		background: rgba(0,0,0,0.3);
		z-index: 9999;
		display: flex;
		align-items: flex-end;
	}
	.custom-popup {
		width: 100vw;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding-bottom: 40rpx;
	}
	.popup-item {
		padding: 40rpx 0 20rpx 0;
		text-align: center;
		font-size: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}
	.popup-desc {
		display: block;
		font-size: 20rpx;
		color: #999;
		margin-top: 8rpx;
	}
	.popup-cancel {
		padding: 40rpx 0 0 0;
		text-align: center;
		font-size: 30rpx;
		color: #007aff;
	}
</style>
